<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			height: 30px;
			border: 1px solid #333;
		}
		
		 
		p:nth-child(1) { 		/* 括号内表示第几个节点，而不是索引 */
			background-color: red;
		} 
		
		p:nth-child(even) { 		/* 偶数even(也可以2n)行变色(奇数odd或2n+1) */
			background-color: blue;
		}
		
		p:nth-child(3n) {
			background-color: pink;
		}
		
		p:nth-last-child(2) { 		/*受到了最后一个h2标签的影响了,反而变成了最后一个而不是倒数第二个*/
			background-color: yellow;
		} 

		span:nth-of-type(2) {
			background-color: blue;
		}

		span:nth-last-of-type(2) {
			background-color: green;
		}

		/* 
		nth-child(1) == first-child
		nth-last-child(1) == last-child
		nth-of-type(1) == first-type-of
		nth-last-of-type(1) == last-type-of 
		*/

		p:empty {background-color: cyan;}
	</style>
</head>
<body>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<p>p4</p>
	<p>p5</p>
	<p>p6</p>
	<p>p7</p>
	<p>p8</p>
	<h2>
		<span>1111</span>
		<a href="javascript:;">aaa</a>
		<span>2222</span>
		<span>3333</span>
		<span>4444</span>
		<a href="javascript:;">bbb</a>
		<p></p>
	</h2>
</body>
</html>